<template>
  <div>
    <h1>额外的 ref 解包细节</h1>
    <div>
      {{ shujuyuan.items }}
    </div>
    <div>
      <h3>v-for嵌套</h3>
      <div>
        <div v-for="(item, index) in shujuyuan" :key="index">
          {{ item }}

          <ul>
            <li v-for="(itemIn, index) in item" :key="index">{{ itemIn }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Study3StuDemo4'
}
</script>
<script setup lang="ts">
import { reactive, ref, type Ref } from 'vue'

const count = ref(0)
const state = reactive({
  count: count,
  countVal: count.value
})

console.log(state.count, 'state.count')
// 修改属实是ref对象的值
// state.count = 100
// console.log(state.count, 'state.count')
// console.log(count, 'count')

console.log('----------')

state.countVal = 100
console.log(state.countVal, 'state.countVal')
console.log(count, 'count')

// 1.一个ref对象赋值`响应式对象的属性`，是把`整个ref对象`赋值过去了，而不是ref的value
// 2.一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。换句话说，它的行为就像一个普通的属性

// 数组和集合的注意事项
// 与 reactive 对象不同的是，当 ref 作为响应式数组或原生集合类型 (如 Map) 中的元素被访问时，它不会被解包：
const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)

const map: Map<string, Ref<number>> = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count')?.value)

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

const shujuyuan = ref<any>({
  items,
  myObject
})
</script>

<style></style>
